<template>
    <div class="secretary-detail">
        <div style="text-align: left;font-size: 18px;font-weight: bold;margin-bottom: 10px;">当前状态：
            <el-tag v-if="form.state === '0'" close-transition type="danger"  effect="dark">待提交</el-tag>
            <el-tag v-else-if="form.state === '1'" close-transition  type="warning"  effect="dark">待镇党委审核</el-tag>
            <el-tag v-else-if="form.state === '2'" close-transition  type="primary"  effect="dark">待市委审核</el-tag>
            <el-tag v-else-if="form.state === '3'" close-transition  type="success"  effect="dark">市委审核通过</el-tag>
            <el-popover  placement="right"  width="400" trigger="click">
                <el-timeline>
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :color="activity.color"
                        :timestamp="activity.modifiedAt">
                        <div>
                            <el-tag v-if="activity.status == '0'" close-transition type="success"  effect="dark">编辑</el-tag>
                            <el-tag v-else-if="activity.status == '1'" close-transition  type="primary"  effect="dark">提交</el-tag>
                            <el-tag v-else close-transition  type="danger"  effect="dark">审核</el-tag>
                            {{activity.auditor}}
                            {{activity.auditAdvice}}
                        </div>
                    </el-timeline-item>
                </el-timeline>

                <el-button slot="reference" type="text" @click="shRcord()" >信息更新记录</el-button>
            </el-popover>
            <div style="float: right;padding-right: 25px">
                <div style="display: inline-block;font-size: 16px;color: red">
                    <p v-show="isHasTask">友情提示: 基本信息更新任务已发布（<span style="color: goldenrod;font-weight: bold;text-decoration: underline">截止日期{{endTime}}</span>），当前信息可进行修改、保存、提交等操作！</p>
                    <p v-show="!isHasTask">友情提示: 基本信息更新任务未发布，当前信息不可进行修改、保存、提交等操作！</p>
                </div>
                <el-button type="primary" plain @click="editInfo()" v-show="user.roleCode === 'COUNTRY_SIDE_ACTOR' && (form.state === '0' || form.state === '3') && isHasTask">编辑</el-button>
                <el-button type="success" plain @click="saveBaseInfo()" v-show="!disabled && isHasTask">保存</el-button>
                <el-button type="primary" @click="submit" v-show="user.roleCode === 'COUNTRY_SIDE_ACTOR' && form.state === '0' && isHasTask"> 提交</el-button>
                <el-button type="warning" @click="() => {this.$emit('back')}" v-show="isFromList"> 返回</el-button>
            </div>
        </div>
        <div v-loading="loading">
            <el-form label-position="right" label-width="120px" :model="form">
                <div style="width: 350px;float: left;">
                    <div style="width: 100%;text-align: center;margin-bottom: 30px">
                        <br/>
                        <el-image class="headPicture" :src=form.headSculpture>
                        </el-image>
                        <div style="font-size: 20px;margin: 10px 0;color: goldenrod;font-weight: bold">{{form.postName}}</div>
                        <div v-show="disabled" style="font-size: 18px;margin: 10px 0;font-weight: bold">{{form.name||"暂无"}}</div>
                        <el-form-item  v-show="!disabled" label="姓名">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </div>
                    <div class="baseTitle">&nbsp;基 本 信 息</div>
                    <div class="baseInfo">
                        <el-form-item label="性别">
                            <el-select v-model="form.sex" clearable v-show="!disabled">
                                <el-option v-for="item in sexOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                            </el-select>
                            <span v-show="disabled">{{form.sex||"暂无"}}</span>
                        </el-form-item>
                        <el-form-item label="出生日期">
                            <el-date-picker
                                v-model="form.birth"
                                v-show="!disabled"
                                type="date"
                                value-format="yyyy-MM-dd">
                            </el-date-picker>
                            <span v-show="disabled">{{form.birth||"暂无"}}</span>
                        </el-form-item>
                        <el-form-item label="民族">
                            <el-select v-model="form.nation" clearable v-show="!disabled">
                                <el-option v-for="item in nationOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                            </el-select>
                            <span v-show="disabled">{{form.nation||"暂无"}}</span>
                        </el-form-item>
                        <el-form-item label="籍贯">
                            <el-input v-model="form.nativePlace" v-show="!disabled"></el-input>
                            <span v-show="disabled">{{form.nativePlace||"暂无"}}</span>
                        </el-form-item>
                        <el-form-item label="学历">
                            <el-select v-model="form.education" clearable v-show="!disabled">
                                <el-option v-for="item in eduOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                            </el-select>
                            <span v-show="disabled">{{form.education||"暂无"}}</span>
                        </el-form-item>

                        <el-form-item label="入党时间">
                            <el-date-picker
                                v-model="form.partyTime"
                                v-show="!disabled"
                                type="date"
                                value-format="yyyy-MM-dd"></el-date-picker>
                            <span v-show="disabled">{{form.partyTime||"暂无"}}</span>
                        </el-form-item>
                        <el-form-item label="出生地">
                            <el-input v-model="form.birthPlace" v-show="!disabled"></el-input>
                            <span v-show="disabled">{{form.birthPlace||"暂无"}}</span>
                        </el-form-item>
                        <el-form-item label="在村工作时间">
                            <el-date-picker
                                v-model="form.workTime"
                                v-show="!disabled"
                                type="date"
                                value-format="yyyy-MM-dd"></el-date-picker>
                            <span v-show="disabled">{{form.workTime||"暂无"}}</span>
                        </el-form-item>

                        <el-form-item label="健康情况">
                            <el-select v-model="form.health" clearable v-show="!disabled">
                                <el-option v-for="item in healthOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                            </el-select>
                            <span v-show="disabled">{{form.health||"暂无"}}</span>
                        </el-form-item>
                        <el-form-item label="人员类型">
                            <el-select v-model="form.personnelType" clearable v-show="!disabled">
                                <el-option v-for="item in personOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                            </el-select>
                            <span v-show="disabled">{{form.personnelType||"暂无"}}</span>
                        </el-form-item>
                        <el-form-item label="专业职称">
                            <el-input v-model="form.professionalTitle" v-show="!disabled"></el-input>
                            <span v-show="disabled">{{form.professionalTitle||"暂无"}}</span>
                        </el-form-item>

                        <el-form-item label="身份证号">
                            <el-input v-model="form.identityCard" v-show="!disabled"></el-input>
                            <span v-show="disabled">{{form.identityCard||"暂无"}}</span>
                        </el-form-item>
                        <el-form-item label="驾驶证号">
                            <el-input v-model="form.drivingLicenseNumber" v-show="!disabled"></el-input>
                            <span v-show="disabled">{{form.drivingLicenseNumber||"暂无"}}</span>
                        </el-form-item>
                        <el-form-item label="联系方式">
                            <el-input v-model="form.contact" v-show="!disabled"></el-input>
                            <span v-show="disabled">{{form.contact||"暂无"}}</span>
                        </el-form-item>
                        <el-form-item label="是否有失信行为">
                            <el-select v-model="form.creditStatus" clearable v-show="!disabled">
                                <el-option v-for="item in creditOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                            </el-select>
                            <span v-show="disabled">{{form.creditStatus||"暂无"}}</span>
                        </el-form-item>
                    </div>
                    <div class="baseTitle">&nbsp;职 级 信 息</div>
                    <div class="baseInfo" style="text-align: left;margin-left: 20px">
                        <el-image class="smallTitle"  src="../../../static/img/position.png"></el-image>
                        <span style="font-size: 18px;font-weight: bold;color: goldenrod; margin-left: 5px;">{{form.quasiAssessmentRank||"暂无"}}</span>
                        <p style="font-size: 12px;  margin-left: 40px;color: #ccc">{{form.termOfOffice||"暂无"}}</p>
                    </div>
                </div>

                <div style="width:65%;float: left;margin-left: 50px">
                    <div class="otherInfo">

                        <div class="left-item-content">
                            <el-image  class="smallTitle" src="../../../static/img/workExperience.png"></el-image>
                            <span >工作简历</span>
                            <el-input type="textarea"  v-show="!disabled" v-model="form.workExperience"
                                      :placeholder="workExperiencePlaceholder" :rows="3"></el-input>
                            <el-timeline v-show="disabled" :reverse="true">
                                <el-timeline-item
                                    v-for="(activity, index) in handleWorkExperience(form.workExperience)"
                                    :key="index">
                                    {{activity}}
                                </el-timeline-item>
                            </el-timeline>
                        </div>

                        <div class="left-item-content">
                            <el-image  class="smallTitle"  src="../../../static/img/reward.png"></el-image>
                            <span>奖惩情况</span>
                            <div v-show="disabled" class="show-self">
                                <div v-for="item in honoursList">
                                    <div style="margin-bottom: 10px">
                                        <label>获取时间：{{item.achieveTime}}</label>
                                        <label>奖或惩：{{item.rewardsType}}</label>
                                        <label>表彰级别：{{item.honourDescription}}</label>
                                        <label>特殊表彰：{{item.honourType||'暂无'}}</label>
                                    </div>
                                    <div style="margin-bottom: 10px;  ">
                                        <span>表彰内容：</span>
                                        <p style="display: inline-block">{{item.content}}</p>
                                    </div>
                                    <div style="margin-bottom: 10px">
                                        <span>佐证材料：</span>
                                        <p style="display: inline-block">{{item.supportDoc}}</p>
                                    </div>
                                </div>
                            </div>
                            <el-button style="position: relative;left: -105px;margin-bottom: 4px;" size="mini" v-if="!disabled" @click="add('honours')" type="primary" round>添加</el-button>
                            <el-table v-if="!disabled" :data="honoursList" style="width: 100%">
                                <el-table-column prop="achieveTime" label="获取时间" width="150">
                                    <template slot-scope="scope">
                                        <el-date-picker
                                            v-if="currentHonoursIndex === scope.$index"
                                            v-model="scope.row.achieveTime"
                                            type="year"
                                            value-format="yyyy-MM-dd"
                                            placeholder="选择日期">
                                        </el-date-picker>
                                        <span v-else>{{new Date(scope.row.achieveTime).getFullYear()}}年</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="content" label="表彰内容">
                                    <template slot-scope="scope">
                                        <el-input v-if="currentHonoursIndex === scope.$index" type="text" v-model="scope.row.content"></el-input>
                                        <span v-else>{{scope.row.content}}</span>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="content" label="奖或惩">
                                    <template slot-scope="scope">
                                        <el-select v-if="currentHonoursIndex === scope.$index" type="text" v-model="scope.row.rewardsType">
                                            <el-option v-for="item in rewardsTypeOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                        </el-select>
                                        <span v-else>{{scope.row.rewardsType}}</span>

                                    </template>
                                </el-table-column>

                                <el-table-column prop="content" label="表彰级别">
                                    <template slot-scope="scope">
                                        <el-select v-if="currentHonoursIndex === scope.$index" type="text" v-model="scope.row.honourDescription">
                                            <el-option v-for="item in honourDescriptionOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                        </el-select>
                                        <span v-else>{{scope.row.honourDescription}}</span>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="content" label="特殊表彰">
                                    <template slot-scope="scope">
                                        <el-select v-if="currentHonoursIndex === scope.$index" type="text" v-model="scope.row.honourType">
                                            <el-option v-for="item in honourType" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                        </el-select>
                                        <span v-else>{{scope.row.honourType}}</span>
                                    </template>
                                </el-table-column>


                                <el-table-column prop="supportDoc" label="佐证材料">
                                    <template slot-scope="scope">
                                        <CommonFileUpload  :value="scope.row.supportDoc" @getValue="scope.row.supportDoc = $event"
                                                           :disabled = "!(currentHonoursIndex === scope.$index && !disabled)"   style="width: 100%;"></CommonFileUpload>
                                        <!-- <el-input v-if="currentHonoursIndex === scope.$index" type="text" v-model="scope.row.supportDoc"></el-input>-->
                                    </template>
                                </el-table-column>
                                <el-table-column fixed="right" label="操作" width="100" v-if="!disabled">
                                    <template slot-scope="scope">
                                        <el-button  type="text" size="small" @click="edit('honours',scope)" v-if="isHonoursEdit">编辑</el-button>
                                        <el-button  type="text" size="small" @click="finish('honours',scope)" v-if="!isHonoursEdit">完成</el-button>
                                        <el-button  type="text" size="small" @click="del('honours',scope)" v-if="isHonoursEdit">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>

                        <div class="left-item-content">
                            <el-image  class="smallTitle"  src="../../../static/img/trainingInfo.png"></el-image>
                            <span >培训情况</span>
                            <el-button style="position: relative;left: -105px;margin-bottom: 4px;" size="mini" v-if="!disabled" @click="add('trainingInfoVOS')" type="primary" round>添加</el-button>
                            <el-table v-show="!disabled" :data="pxList" style="width: 100%">
                                <el-table-column prop="timeBegin" label="开始时间" width="150">
                                    <template slot-scope="scope">
                                        <el-date-picker
                                            v-if="currentPxIndex === scope.$index"
                                            v-model="scope.row.timeBegin"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="培训开始时间">
                                        </el-date-picker>
                                        <span v-else>{{new Date(scope.row.timeBegin).Format("yyyy-MM-dd")}}</span>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="timeEnd" label="结束时间" width="150">
                                    <template slot-scope="scope">
                                        <el-date-picker
                                            v-if="currentPxIndex === scope.$index"
                                            v-model="scope.row.timeEnd"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="培训结束时间">
                                        </el-date-picker>
                                        <span v-else>{{new Date(scope.row.timeEnd).Format("yyyy-MM-dd")}}</span>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="trainingName" label="培训班名称">
                                    <template slot-scope="scope">
                                        <el-input v-if="currentPxIndex === scope.$index" type="text" v-model="scope.row.trainingName"></el-input>
                                        <span v-else>{{scope.row.trainingName}}</span>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="trainingType" label="培训类型">
                                    <template slot-scope="scope">
                                        <el-input v-if="currentPxIndex === scope.$index" type="text" v-model="scope.row.trainingType"></el-input>
                                        <span v-else>{{scope.row.trainingType}}</span>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="content" label="培训内容">
                                    <template slot-scope="scope">
                                        <el-input v-if="currentPxIndex === scope.$index" type="text" v-model="scope.row.content"></el-input>
                                        <span v-else>{{scope.row.content}}</span>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="supportDoc" label="举证材料">
                                    <template slot-scope="scope">
                                        <CommonFileUpload  :value="scope.row.supportDoc" @getValue="scope.row.supportDoc = $event"
                                                           :disabled = "!(currentPxIndex === scope.$index && !disabled)" style="width: 100%;"></CommonFileUpload>
                                        <!-- <el-input v-if="currentHonoursIndex === scope.$index" type="text" v-model="scope.row.supportDoc"></el-input>-->
                                    </template>
                                </el-table-column>

                                <el-table-column prop="trainingResults" label="培训成果">
                                    <template slot-scope="scope">
                                        <el-input v-if="currentPxIndex === scope.$index" type="text" v-model="scope.row.trainingResults"></el-input>
                                        <span v-else>{{scope.row.trainingResults}}</span>
                                    </template>
                                </el-table-column>

                                <el-table-column fixed="right" label="操作" width="100" v-if="!disabled">
                                    <template slot-scope="scope">
                                        <el-button  type="text" size="small" @click="edit('trainingInfoVOS',scope)" v-if="ispxEdit">编辑</el-button>
                                        <el-button  type="text" size="small" @click="finish('trainingInfoVOS',scope)" v-if="!ispxEdit">完成</el-button>
                                        <el-button  type="text" size="small" @click="del('trainingInfoVOS',scope)" v-if="ispxEdit">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div v-show="disabled" class="show-self">
                                <div v-for="item in pxList">
                                    <div style="margin-bottom: 10px">
                                        <label>培训时间：{{item.timeBegin}}至{{item.timeEnd}}</label>
                                        <label>培训名称：{{item.trainingName}}</label>
                                        <label>培训类型：{{item.trainingType}}</label>
                                    </div>
                                    <div style="margin-bottom: 10px;">
                                        <span>培训内容：</span>
                                        <p style="display: inline-block">{{item.content}}</p>
                                    </div>
                                    <div style="margin-bottom: 10px">
                                        <span>培训成果：</span>
                                        <p style="display: inline-block">{{item.content}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="left-item-content">
                            <el-image class="smallTitle" src="../../../static/img/check.png"></el-image>
                            <span>考核情况</span>
                            <div v-show="disabled" class="show-self">
                                <div v-for="item in pxList">
                                    <div style="margin-bottom: 10px">
                                        <label>考核年度：2019年</label>
                                    </div>
                                    <div style="margin-bottom: 10px;">
                                        <span>考核内容：</span>
                                        <p style="display: inline-block">针对2019年全面村书记工作情况的考核</p>
                                    </div>
                                    <div style="margin-bottom: 10px">
                                        <span>考核结果：</span>
                                        <p style="display: inline-block">等次: 优秀；镇排名: 5；全市排名：23</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="left-item-content">
                            <el-image  class="smallTitle" src="../../../static/img/salary.png"></el-image>
                            <span >报酬情况</span>
                            <el-button style="position: relative;left: -105px;margin-bottom: 4px;" size="mini" v-if="!disabled" @click="add('rewards')" type="primary" round>添加</el-button>
                            <el-table v-if="!disabled" :data="rewardsList" style="width: 100%">
                                <el-table-column prop="achieveTime" label="获取时间" width="100">
                                    <template slot-scope="scope">
                                        <el-date-picker
                                            v-if="currentRewardsIndex === scope.$index"
                                            v-model="scope.row.achieveTime"
                                            type="year"
                                            value-format="yyyy-MM-dd"
                                            placeholder="选择日期">
                                        </el-date-picker>
                                        <span v-else>{{new Date(scope.row.achieveTime).getFullYear()}}年</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="basicReward" label="基本报酬(元/月)">
                                    <template slot-scope="scope">
                                        <el-input v-if="currentRewardsIndex === scope.$index" type="text" v-model="scope.row.basicReward"
                                                  @change="getSum(scope.row)"></el-input>
                                        <span v-else>{{scope.row.basicReward}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="reviewReward" label="考核报酬(元/年)">
                                    <template slot-scope="scope">
                                        <el-input v-if="currentRewardsIndex === scope.$index" type="text" v-model="scope.row.reviewReward"
                                                  @change="getSum(scope.row)"></el-input>
                                        <span v-else>{{scope.row.reviewReward}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="otherReward" label="增收奖励(元/年)">
                                    <template slot-scope="scope">
                                        <el-input v-if="currentRewardsIndex === scope.$index" type="text" v-model="scope.row.otherReward"
                                                  @change="getSum(scope.row)"></el-input>
                                        <span v-else>{{scope.row.otherReward}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="totalReward" label="合计(元/年)">
                                    <template slot-scope="scope">
                                        <el-input v-if="currentRewardsIndex === scope.$index" type="text" disabled v-model="scope.row.totalReward">
                                        </el-input>
                                        <span v-else>{{scope.row.totalReward}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="supportDoc" label="佐证材料">
                                    <template slot-scope="scope">
                                        <CommonFileUpload  :value="scope.row.supportDoc" @getValue="scope.row.supportDoc = $event"
                                                           :disabled="!(currentRewardsIndex === scope.$index && !disabled)" style="width: 100%;"></CommonFileUpload>
                                        <!-- <el-input v-if="currentHonoursIndex === scope.$index" type="text" v-model="scope.row.supportDoc"></el-input>-->
                                    </template>
                                </el-table-column>
                                <el-table-column fixed="right" label="操作" width="100" v-if="!disabled">
                                    <template slot-scope="scope">
                                        <el-button  type="text" size="small" @click="edit('rewards',scope)" v-if="isRewardsEdit">编辑</el-button>
                                        <el-button  type="text" size="small" @click="finish('rewards',scope)" v-if="!isRewardsEdit">完成</el-button>
                                        <el-button  type="text" size="small" @click="del('rewards',scope)" v-if="isRewardsEdit">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <div v-show="disabled" class="show-self">
                                <div v-for="item in rewardsList">
                                    <div style="margin-bottom: 10px">
                                        <label>获取时间：{{item.achieveTime}}</label>
                                        <label>基本报酬：{{item.basicReward}}</label>
                                        <label>考核报酬：{{item.reviewReward}}</label>
                                        <label>增收奖励：{{item.otherReward}}</label>
                                    </div>
                                    <div style="margin-bottom: 10px;">
                                        <span>合计：</span>
                                        <p style="display: inline-block">{{item.totalReward}}</p>
                                    </div>
                                    <div style="margin-bottom: 10px">
                                        <span>佐证材料：</span>
                                        <p style="display: inline-block">{{item.supportDoc}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="left-item-content">
                            <el-image  class="smallTitle" src="../../../static/img/family.png"></el-image>
                            <span>家庭主要成员及社会关系</span>
                            <el-button style="position: relative;left: -216px;margin-bottom: 4px;" size="mini" v-if="!disabled" @click="add('familyInfoVOS')" type="primary" round>添加</el-button>
                            <el-table v-if="!disabled"  :data="familyList" style="width: 100%">
                                <el-table-column prop="name" label="名称">
                                    <template slot-scope="scope">
                                        <el-input v-if="currentFamilyIndex === scope.$index" type="text" v-model="scope.row.name"
                                                  @change="getSum(scope.row)"></el-input>
                                        <span v-else>{{scope.row.name}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="appellation" label="称谓">
                                    <template slot-scope="scope">
                                        <el-input v-if="currentFamilyIndex === scope.$index" type="text" v-model="scope.row.appellation"
                                                  @change="getSum(scope.row)"></el-input>
                                        <span v-else>{{scope.row.appellation}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="politicalStatus" label="政治面貌">
                                    <template slot-scope="scope">
                                        <el-select v-if="currentFamilyIndex === scope.$index" type="text" v-model="scope.row.politicalStatus">
                                            <el-option v-for="item in Political" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                        </el-select>
                                        <span v-else>{{scope.row.politicalStatus}}</span>
                                    </template>
                                </el-table-column>



                                <el-table-column prop="orgAndJob" label="工作单位及职务">
                                    <template slot-scope="scope">
                                        <el-input v-if="currentFamilyIndex === scope.$index" type="text" v-model="scope.row.orgAndJob"
                                                   ></el-input>
                                        <span v-else>{{scope.row.orgAndJob}}</span>
                                    </template>
                                </el-table-column>



                                <el-table-column fixed="right" label="操作" width="100" v-if="!disabled">
                                    <template slot-scope="scope">
                                        <el-button  type="text" size="small" @click="edit('familyInfoVOS',scope)" v-if="isfamilyEdit">编辑</el-button>
                                        <el-button  type="text" size="small" @click="finish('familyInfoVOS',scope)" v-if="!isfamilyEdit">完成</el-button>
                                        <el-button  type="text" size="small" @click="del('familyInfoVOS',scope)" v-if="isfamilyEdit">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div v-show="disabled" class="show-self">
                                <div v-for="item in familyList">
                                    <div style="margin-bottom: 10px">
                                        <label>名称：{{item.name}}</label>
                                        <label>称谓：{{item.appellation}}</label>
                                        <label>政治面貌：{{item.politicalStatus}}</label>
                                        <label>工作单位及职务：{{item.orgAndJob}}</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="left-item-content">
                            <el-image  class="smallTitle" src="../../../static/img/relation.png"></el-image>
                            <span >在村工作具有近亲属关系人员</span>
                            <el-button style="position: relative;left: -248px;margin-bottom: 4px;" size="mini" v-if="!disabled" @click="add('familyWorkInfoVOS')" type="primary" round>添加</el-button>
                            <el-table v-if="!disabled" :data="familyWorkList" style="width: 100%">
                                <el-table-column prop="appellation" label="称谓">
                                    <template slot-scope="scope">
                                        <el-input v-if="currentFamilyWorkIndex === scope.$index" type="text" v-model="scope.row.appellation"
                                                  @change="getSum(scope.row)"></el-input>
                                        <span v-else>{{scope.row.appellation}}</span>
                                    </template>
                                </el-table-column>


                                <el-table-column prop="politicalStatus" label="政治面貌">
                                    <template slot-scope="scope">
                                        <el-select v-if="currentFamilyWorkIndex === scope.$index" type="text" v-model="scope.row.politicalStatus">
                                            <el-option v-for="item in Political" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                        </el-select>
                                        <span v-else>{{scope.row.politicalStatus}}</span>
                                    </template>
                                </el-table-column>


                                <el-table-column prop="job" label="职务">
                                    <template slot-scope="scope">
                                        <el-input v-if="currentFamilyWorkIndex === scope.$index" type="text" v-model="scope.row.job"
                                                  @change="getSum(scope.row)"></el-input>
                                        <span v-else>{{scope.row.job}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="duration" label="在村工作时长">
                                    <template slot-scope="scope">
                                        <el-input v-if="currentFamilyWorkIndex === scope.$index" type="text" v-model="scope.row.duration"
                                                  @change="getSum(scope.row)"></el-input>
                                        <span v-else>{{scope.row.duration}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column fixed="right" label="操作" width="100" v-if="!disabled">
                                    <template slot-scope="scope">
                                        <el-button  type="text" size="small" @click="edit('familyWorkInfoVOS',scope)" v-if="isfamilyWorkEdit">编辑</el-button>
                                        <el-button  type="text" size="small" @click="finish('familyWorkInfoVOS',scope)" v-if="!isfamilyWorkEdit">完成</el-button>
                                        <el-button  type="text" size="small" @click="del('familyWorkInfoVOS',scope)" v-if="isfamilyWorkEdit">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div v-show="disabled" class="show-self">
                                <div v-for="item in familyWorkList">
                                    <div style="margin-bottom: 10px">
                                        <label>称谓：{{item.appellation}}</label>
                                        <label>政治面貌：{{item.politicalStatus}}</label>
                                        <label>职务：{{item.job}}</label>
                                        <label>在村工作时长：{{item.duration}}</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="left-item-content">
                            <el-image  class="smallTitle" src="../../../static/img/otherInfo.png"></el-image>
                            <span >其他情况</span>
                            <div style="width: 100%;">
                                <div style=" float: left;width: 25%">  <span style="font-size: 16px">上年度新型农村合作医疗购买人数：</span></div>
                               <div style=" float: left">
                                   <el-input type="text"  v-show="!disabled" v-model="form.medicalInsuranceNumber"></el-input>
                                   <pre v-show="disabled">{{form.medicalInsuranceNumber||"暂无"}} 人</pre>
                               </div>
                            </div>
                            <br>
                            <div style="width: 100%;margin-top: 20px">
                                <div style=" float: left;width: 25%">  <span style="font-size: 16px">村委会月度用电量：</span></div>
                                <div style=" float: left">
                                    <el-input type="text"  v-show="!disabled" v-model="form.monthlyElectricity"></el-input>
                                    <pre v-show="disabled">{{form.monthlyElectricity||"暂无"}} 度</pre>
                                </div>
                            </div>
                            <br>
                            <div style="width: 100%;margin-top: 20px">
                                <div style=" float: left;width: 25%">  <span style="font-size: 16px">农村产权交易平台交易量：</span></div>
                                <div style=" float: left">
                                    <el-input type="text"  v-show="!disabled" v-model="form.propertyRightsTransactionsNumber"></el-input>
                                    <pre v-show="disabled">{{form.propertyRightsTransactionsNumber||"暂无"}} 次</pre>
                                </div>
                            </div>
                            <br>
                            <div style="width: 100%;margin-top: 20px">
                                <div style=" float: left;width: 25%">  <span style="font-size: 16px">12345热线月投诉量：</span></div>
                                <div style=" float: left">
                                    <el-input type="text"  v-show="!disabled" v-model="form.complaintVolume"> </el-input>
                                    <pre v-show="disabled">{{form.complaintVolume||"暂无"}} 次</pre></div>
                            </div>

                        </div>
                    </div>
                </div>
                <div style="clear: both"></div>
                <div style="text-align: left;margin-bottom: 50px;" v-show="isReview">
                    <h4>&nbsp;审核信息</h4>
                    <hr/>
                    <br/>
                    <br/>
                    <el-form ref="reviewForm" :inline="true" :model="reviewForm" class="demo-form-inline  common-textarea  " label-width="170px">
                        <el-form-item label="审核人" prop="auditor" :rules="{required: true, message: '审核人不能为空', trigger: 'blur'}">
                            <el-input type="textarea" v-model="reviewForm.auditor" :rows="1"></el-input>
                        </el-form-item>
                        <br>
                        <el-form-item label="审核意见" prop="auditAdvice" :rules="{required: true, message: '审核意见不能为空', trigger: 'blur'}">
                            <el-input type="textarea" :rows="2" v-model="reviewForm.auditAdvice"></el-input>
                        </el-form-item>
                        <br>
                        <el-form-item label=" ">
                            <el-button type="primary" @click="review('SUCCESS')">通过</el-button>
                            <el-button type="danger" @click="review('FAILED')">驳回</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-form>
        </div>
<!--        <el-button type="primary" plain @click="verify(slotProps.selected)"   class="self-btn self-submit" v-if="userAuthority!=3"  >审核</el-button>-->
    </div>
</template>


<script>
    import CommonFileUpload from '@/components/FileUpLoad';
    import LookUp from  '@/lookup';
    export default {
        name: "SecretaryDetail",
        props: {
            districtId: {
                type: String,
                default: ''
            },
            isReview: {
                type: Boolean,
                default: false
            },
            isLook: {
                type: Boolean,
                default: false
            },
            isFromList: {
               type: Boolean,
               default: false
            }
        },
        data(){
            return{
                activities:[],
                form:{},
                disabled:true,
                honoursList:[],
                pxList:[],
                familyList:[],
                familyWorkList:[],
                currentHonoursIndex:'',
                currentRewardsIndex:'',

                currentPxIndex:'',
                currentFamilyIndex:'',
                currentFamilyWorkIndex:'',

                isHonoursEdit:true,
                rewardsList:[],
                isRewardsEdit:true,
                loading: false,
                ispxEdit:true,
                isfamilyEdit:true,
                isfamilyWorkEdit:true,
                reviewForm: {},
                user: {},
                sexOptions:LookUp["Sex"],
                nationOptions:LookUp["nation"],
                eduOptions:LookUp["Education"],
                healthOptions:LookUp["health"],
                personOptions:LookUp["personTyle"],
                creditOptions:LookUp["credit"],
                rewardsTypeOptions:LookUp["rewardsTypeOptions"],
                honourDescriptionOptions:LookUp["honourDescriptionOptions"],
                honourType:LookUp["HonoursType"],
                Political : LookUp["Political"],
                workExperiencePlaceholder: '2006.08-2010.10 任XX村支部组织委员' + '\n' +
                    '2010.11-2013.10 任XX村支部副书记' + '\n' +
                    '2013.11-2015.10 任XX村支部书记(示例)',
                isHasTask: false,
                endTime: ""
            }
        },
        methods:{
            initPara(){
                this.form={};
                this.disabled=true;
                this.currentHonoursIndex='';
                this.currentRewardsIndex='';

                this.currentPxIndex='';
                this.currentFamilyIndex='';
                this.currentFamilyWorkIndex='';

                this.isHonoursEdit=true;
                this.isRewardsEdit=true;
                this.ispxEdit=true;
                this.isfamilyEdit=true;
                this.isfamilyWorkEdit=true
            },
            editInfo(){
                this.disabled = !this.disabled;
                this.currentHonoursIndex='';
                this.currentRewardsIndex='';
                this.currentPxIndex='';
                this.currentFamilyIndex='';
                this.currentFamilyWorkIndex='';
                this.isHonoursEdit=true;
                this.isRewardsEdit=true;
                this.ispxEdit=true;
                this.isfamilyEdit=true;
                this.isfamilyWorkEdit=true
            },
            shRcord(){
                this.$http('POST',`identity/informationAudit/list?sort=createdAt,desc`,
                    {villageId: this.form.id ,processType:'基本信息更新'},false).then(data => {
                    this.activities = [];
                    for (let i=0;i<data.length;i++){
                        let obj = {};
                        obj.modifiedAt = new Date(data[i].modifiedAt).Format("yyyy-MM-dd HH:mm");
                        obj.auditor = data[i].auditor;
                        obj.auditAdvice = data[i].auditAdvice;
                        obj.status = data[i].status;
                        this.activities.push(obj);
                    }

                });

            },
            showBaseInfo(){
                this.loading = true;
                this.honoursList = [];
                this.rewardsList = [];
                this.pxList = [];
                this.familyList = [];
                this.familyWorkList = [];
                this.$http('POST',`identity/villageCadres/list`,
                    {post: "SECRETARY",districtId: this.districtId },false).then(data => {
                        if (data.length >= 1) {
                            let current = data[0];
                            this.form = current;
                            if(current.honours){
                                this.honoursList = data[0].honours;
                            }
                            if(current.rewards){
                                this.rewardsList = data[0].rewards;
                            }
                            if(current.trainingInfoVOS){
                                this.pxList = data[0].trainingInfoVOS;
                            }
                            if(current.familyInfoVOS){
                                this.familyList = data[0].familyInfoVOS;
                            }
                            if(current.familyWorkInfoVOS){
                                this.familyWorkList = data[0].familyWorkInfoVOS;
                            }
                        } else {
                            this.form.state = '0';
                            this.disabled = false;
                        }
                    this.loading = false;
                });
            },
            edit(type,scope){
                if(type==='honours'){
                    this.currentHonoursIndex = scope.$index;
                    this.isHonoursEdit = false;
                }else if(type==='rewards'){
                    this.currentRewardsIndex = scope.$index;
                    console.log(this.currentRewardsIndex)
                    this.isRewardsEdit = false;
                }else if(type==='trainingInfoVOS'){
                    this.currentPxIndex = scope.$index;
                    this.ispxEdit = false;
                }else if(type==='familyInfoVOS'){
                    this.currentFamilyIndex = scope.$index;
                    this.isfamilyEdit = false;
                }else if(type==='familyWorkInfoVOS'){
                    this.currentFamilyWorkIndex = scope.$index;
                    this.isfamilyWorkEdit = false;
                }
            },
            finish(type,scope){
                if(type==='honours'){
                    this.currentHonoursIndex = "";
                    this.isHonoursEdit = true;
                    this.honoursList[scope.$index]= scope.row;
                }else if(type==='rewards'){
                    this.currentRewardsIndex = "";
                    this.isRewardsEdit = true;
                    this.rewardsList[scope.$index]= scope.row;
                }else if(type==='trainingInfoVOS'){

                    this.currentPxIndex = "";
                    this.ispxEdit = true;
                    this.pxList[scope.$index]= scope.row;

                }else if(type==='familyInfoVOS'){
                    this.currentFamilyIndex = "";
                    this.isfamilyEdit = true;
                    this.familyList[scope.$index]= scope.row;
                }else if(type==='familyWorkInfoVOS'){
                    this.currentFamilyWorkIndex = "";
                    this.isfamilyWorkEdit = true;
                    this.familyWorkList[scope.$index]= scope.row;
                }
            },
            del(type,scope){
                if(type==='honours'){
                    this.honoursList.splice(scope.$index,1);
                }else if(type==='rewards'){
                    this.rewardsList.splice(scope.$index,1);
                }else if(type==='trainingInfoVOS'){
                    this.pxList.splice(scope.$index,1);
                }else if(type==='familyInfoVOS'){
                    this.familyList.splice(scope.$index,1);
                }else if(type==='familyWorkInfoVOS'){
                    this.familyWorkList.splice(scope.$index,1);
                }
            },
            add(type){
                if(type==='honours'){
                    this.honoursList.push({ cadresId:this.form.id});
                    this.currentHonoursIndex = this.honoursList.length-1;
                    this.isHonoursEdit = false;
                }else if(type==='rewards'){
                    this.rewardsList.push({ cadresId:this.form.id});
                    this.currentRewardsIndex = this.rewardsList.length-1;
                    this.isRewardsEdit = false;
                }else if(type==='trainingInfoVOS'){

                    this.pxList.push({ cadresId:this.form.id});

                    this.currentPxIndex = this.pxList.length-1;

                    this.ispxEdit = false;
                }else if(type==='familyInfoVOS'){

                    this.familyList.push({ cadresId:this.form.id});
                    this.currentFamilyIndex  = this.familyList.length-1;
                    this.isfamilyEdit = false;
                }else if(type==='familyWorkInfoVOS'){
                    this.familyWorkList.push({ cadresId:this.form.id});
                    this.currentFamilyWorkIndex = this.familyWorkList.length-1;
                    this.isfamilyWorkEdit = false;
                }
            },
            getSum(row){
                row.totalReward = parseFloat(row.basicReward)*12+ parseFloat(row.reviewReward) + parseFloat(row.otherReward);
            },
            saveBaseInfo(){
                this.loading = true;
                this.honoursList.forEach(item =>{
                    delete item.id;
                    delete item.version;
                    delete item.isDelete;
                    delete item.createdAt;
                    delete item.modifiedAt;
                    delete item.createdBy;
                    delete item.modifiedBy;
                });
                this.rewardsList.forEach(item =>{
                    delete item.id;
                    delete item.version;
                    delete item.isDelete;
                    delete item.createdAt;
                    delete item.modifiedAt;
                    delete item.createdBy;
                    delete item.modifiedBy;
                });
                   this.pxList.forEach(item =>{
                       delete item.id;
                       delete item.version;
                       delete item.isDelete;
                       delete item.createdAt;
                       delete item.modifiedAt;
                       delete item.createdBy;
                       delete item.modifiedBy;

                   });

                this.familyList.forEach(item =>{
                    delete item.id;
                    delete item.version;
                    delete item.isDelete;
                    delete item.createdAt;
                    delete item.modifiedAt;
                    delete item.createdBy;
                    delete item.modifiedBy;
                });
                this.familyWorkList.forEach(item =>{
                    delete item.id;
                    delete item.version;
                    delete item.isDelete;
                    delete item.createdAt;
                    delete item.modifiedAt;
                    delete item.createdBy;
                    delete item.modifiedBy;

                });

                this.form.districtId = this.user.districtId;
                this.form.honours = this.honoursList;
                this.form.rewards = this.rewardsList;
                this.form.trainingInfoDTOS = this.pxList;

                this.form.familyInfoDTOS = this.familyList;
                this.form.familyWorkInfoDTOS = this.familyWorkList;
                this.form.cadresType='SECRETARY';
                this.$http(`${this.form.id ? 'PUT' : 'POST'}`,`identity/villageCadres/${this.form.id ? `${this.form.id}id` : ''}`, this.form,false).then(data => {
                    this.initPara();
                    this.showBaseInfo();
                });
            },
            submit() {
                this.$confirm('确认提交？')
                    .then(_ => {
                        this.loading = true;
                        this.form.cadresType='SECRETARY';
                        this.$http('PUT', 'identity/villageCadres/submit/' + this.form.id, false).then(content => {
                            this.disabled = true;
                            this.showBaseInfo();
                        });
                    })
                    .catch(_ => {});
            },
            review(code) {
                this.$refs['reviewForm'].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.$http('PUT', `identity/villageCadres/verify/${this.form.id}/${code}`, this.reviewForm,false).then(content => {
                            this.$message({
                                type: 'success',
                                message: code==='SUCCESS' ?'审核通过':'审核不通过'
                            });
                            this.$emit('reviewFinish')
                            this.showBaseInfo();
                        }).catch(()=> {
                            this.$message({
                                type: 'error',
                                message: '网络错误'
                            });
                        });
                    }
                });
            },
            handleWorkExperience(workExperience) {
                if (!workExperience) {
                    return ["暂无工作简历信息！"];
                }
                return workExperience.split(/[\n]/);
            },
            checkIsHasTask() {
                this.$http("POST", '/identity/cadreTask/getCurrentTask/基本信息更新', {}, false).then(
                    data => {
                        if (data) {
                            this.isHasTask = true;
                            this.endTime = data.endTime;
                        }
                    }
                )
            }

        },
        components:{
            CommonFileUpload,
        },
        mounted() {
            this.user = this.$store.state.userInfo;
            this.showBaseInfo();
            this.checkIsHasTask();
        }
    }
</script>
<style>
    .secretary-detail .baseInfo .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
        margin-bottom: 10px!important;
    }
    .secretary-detail .left-item-content .el-table th>.cell{
        font-size: 14px!important;
    }
    .secretary-detail .left-item-content .el-table tr>td>.cell{
        font-size: 14px!important;
    }
    .secretary-detail .left-item-content .el-input__inner {
        border: 1px solid transparent !important;
        border-bottom: 1px solid #DCDFE6 !important; ;

    }
</style>
<style scoped>
    .secretary-detail .headPicture {
        width: 150px;
        height: 150px;
        border-radius: 75px;
        border: 2px white solid;
        box-shadow: 0 0 0 3px red;
        overflow: hidden;
    }
    .secretary-detail .baseTitle {
        width: 181px;
        height: 26px;
        background-image: url('../../static/img/base-title-bg.jpg');
        color: white;
        font-size: 16px;
        line-height: 28px;
        margin: 20px 0;
    }

    .secretary-detail .baseInfo {
        font-size: 15px;
        line-height: 30px;
        font-weight: bold;
    }


    .secretary-detail .baseInfo span{
        text-align: left;
    }

    .secretary-detail .otherInfo{
        margin-top: 50px;
        text-align: left;
    }

    .secretary-detail .otherInfo .smallTitle{
        vertical-align: middle;
        position: relative;
        left: -35px;
        top: -21px;
    }
    .secretary-detail .el-tag--mini {
        height: 30px!important;
        line-height: 30px!important;
    }
    .secretary-detail .el-tag {
        font-size: 16px!important;
    }
    .left-item-content {
        border-left: solid 1px red;
        border-top: solid 1px #444444;
        min-height: 100px;
        padding-bottom: 40px;
        padding-left: 20px;
        padding-top: 6px;
    }

    .left-item-content span:nth-child(2){
        position: relative;
        top: -41px;
        left: -30px;
        font-size: 16px;
        font-weight: bold;
        border-bottom: solid 4px red;
        padding: 6px 0px;
    }
    .left-item-content .show-self {
        font-size: 14px;
    }

    .left-item-content .show-self label {
        max-width: 300px;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        word-break: break-all;
        margin-right: 50px;
    }
</style>
